<template>
    <div class="classify">

        <!-- 回到顶部 -->        
        <van-icon name="upgrade" class="backToTop" v-show="isback" @click="backToTop"/>
        
        <div class="top">
          <div class="topBox" @click="toSearch">
            <span class="iconfont icon-sousuo2"></span>
            <span class="text">请输入商品名称</span> 
          </div>
        </div>

        <div class="topList">
            <!-- <span class="iconfont icon-shenglve"></span> -->
             
            <div class="content">
                <van-tabs v-model="active" >
                    
                    <van-tab v-for="(item,index) in topList1" :key="index" :title="item.name" class="list-left">
                        <van-sidebar v-model="activeKey">
                            <van-sidebar-item v-for="(item1,index) in item.list" :key="index" :title="item1.name"  @click="onOne(item1)"/>
                        </van-sidebar>
                    </van-tab>

                </van-tabs>
                
                   
               
                         
                <div class="list-right">
                    <!-- 下拉刷新 -->
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

                        <div class="listContent" v-for="(item,index) in typeList" :key="index">
                            <div class="listContentLeft" @click="toDetail(item)">
                                <img class="img" :src="item.goodsImg" alt="">
                                <div class="name-price">
                                    <span class="name">{{item.goodsName}}</span>
                                    <span class="price">￥{{item.goodsPrice}}/斤</span>
                                </div>
                            </div>

                            <div class="listContentRight">
                                <span class="iconfont icon-gouwuche1"></span>
                            </div>
                        </div>
                    </van-pull-refresh>

                </div>                        
       
            </div>
            
        </div> 

    </div>
   
</template>

<script>
    export default {
        data() {
            return {
                activeKey: 0,
                active: 0,
                typeList:[],
                isback:false,
                scrollTop:0,

                count: 0,
                isLoading: false,
                item:'',
                topList1:[
                    {   
                        name:'蔬菜',
                        list:[
                                {
                                type:1,
                                 name:'根茎类',
                                   list:[]
                                },
                                 {
                                    type:2,
                                    name:'叶菜类',
                                    list:[]
                                },
                                {
                                     type:3,
                                     name:'豆类',
                                    list:[]
                                 },
                                {
                                    type:4,
                                     name:'葱姜蒜',
                                    list:[]
                                },
                                {
                                    type:4,
                                     name:'菌类',
                                    list:[]
                                },
                                {
                                    type:4,
                                     name:'特采',
                                    list:[]
                                },
                                {
                                    type:4,
                                     name:'米面粮油',
                                    list:[]
                                },

                            ]
                          
                    },
                    {    
                        name:'水果',
                        list:[
                                {
                                    type:5,
                                    name:'苹果',
                                },
                                {
                                    type:6,
                                    name:'梨',
                                },
                                {
                                    type:7,
                                    name:'柑橘橙',
                                },
                                {
                                    type:8,
                                    name:'菩提',
                                },
                                {
                                    type:8,
                                    name:'芒果',
                                },
                                {
                                    type:8,
                                    name:'瓜',
                                },
                            ]
                    },
                    {   
                        name:'蛋品豆面',
                        list:['鸡蛋','叶菜类','豆类','葱姜蒜','菌类','特采','米面粮油']
                    },
                     {   
                        name:'休闲酒饮',
                        list:['白酒','叶菜类','豆类','葱姜蒜','菌类','特采','米面粮油']
                    },
                     {   
                        name:'米面粮油',
                        list:['大米','叶菜类','豆类','葱姜蒜','菌类','特采','米面粮油']
                    },
                     {   
                        name:'调料干活',
                        list:['鸡精','叶菜类','豆类','葱姜蒜','菌类','特采','米面粮油']
                    },
                     {   
                        name:'水产冻货',
                        list:['海鲜','叶菜类','豆类','葱姜蒜','菌类','特采','米面粮油','米面粮油']
                    },
                ]
            }
        },
        methods: {
             onRefresh() {
                setTimeout(() => {
                    this.$toast('刷新成功');
                    this.isLoading = false;
                    this.count++;
                }, 500);
            },
            


            toSearch(){
                this.$router.push('/search')
            },
            toDetail(item){
                 console.log(item._id)
                const goodsId=item._id
                this.$router.push('/detail/'+ goodsId)

            },

           
            reqTypeList(type){
                 this.$axios.post('/zhouliang/api/goodsinfo/type',{
                    goodsType:type
                    })
                    .then((res)=>{
                        const {msg,code,list}=res
                        if(code==1){
                            this.typeList=list

                        }else{
                            console.log(msg)
                        }

                    })
            },
        
            onOne(item1){
                this.reqTypeList(item1.type)
                this.replace=false
                
            },

            // click(name){
            //     console.log(name)
            // },

        
            //回到顶部
            backToTop(){
                window.scrollTo(0,0)
                
            },

           

         
        },
        activated() {

        },

        mounted() {
            this.reqTypeList(1)
            //滚动事件
            window.onscroll=()=>{
                const scrollTop=document.documentElement.scrollTop || document.body.scrollTop
                this.isback=scrollTop >200 
            }

        },

        watch:{
            
        },
        
    }
</script>

<style lang="scss" scoped>

.backToTop{
    position: fixed;
    font-size:0.7rem;
    right: 0.8rem;
    bottom: 2.5rem;
    z-index: 1000;
    color: #3bc049;

}


.classify{
    .van-sidebar-item--select{
        border-color: white;
    }
    .top{
        width: 100vw;
        height: 1rem;
        background-color:#3bc049;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0.1rem;
        box-sizing: border-box;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1000;

       
        .topBox{
            width: 90%;  
            height: 0.5rem;
            background-color: rgb(135, 211, 173);
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
           

            .iconfont{
                margin-right: 0.1rem;
            }
            
        
        }
    }
    .topList{
        display: flex;
        justify-content: space-between;
        overflow: auto;
        overflow-x:auto;
       

        .topList-left{
            white-space:nowrap;
            width: 95%;
            padding: 0.3rem 0.1rem;
            
        }
        .topList-right{ 
            width: 5%;
            position: fixed;
            padding: 0.3rem 0.1rem;
            box-sizing: border-box;
            background-color:white;
            right: 0;
            top: 1rem;
            text-align: center;
        
        }

    }

    .content{
        display: flex;
        // position: relative;
         height: calc(100vh - 1rem);
       
        
        .list-left{
            width: 20%;
        }
       
        .list-right{
            width: 80%;
            position: absolute;
            right:0;
            top:1.8rem;
            background-color: white;
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
           
            .listContent{
                display: flex;
                padding: 0.2rem 0.2rem;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #ebe8e8;

                
                &:first-child{
                    border-top: 1px solid #ebe8e8;
                }
               
                .listContentLeft{
                    display: flex;
                    align-items: center;
                   
                    
                    .img{
                        width: 1.5rem;
                        height: 1.5rem;
                    }

                    .name-price{
                        margin-left: 0.3rem;
                        display: flex;
                        flex-direction: column;
                    }
                }
                .listContentRight{
                  
                     .num{
                         font-size: 0.35rem;
                     }

                     .iconfont{
                        font-size: 0.4rem;
                        padding: 0 0.2rem;
                     }
                     .icon-jia{
                         color: #3bc049;
                     }
                     .icon-jian1{
                         color: rgb(240, 233, 233);
                     }
                }

            }
        }

        
       
    }

   


}




</style>